<style>
#userNumber tr td div{
	padding: 20px;
	font-size: 36px;
	border: 1px solid gray;
	width: 86px;
	background-image: url('<?php echo $this->base; ?>/public/images/bg_bt.png');
	background-repeat: repeat-x;
	background-color: #e5e5e5;
	margin: 3px;
}

#userNumber tr td div:active{
	background: #E0FFAF;
}
</style>

<script>

var json = 0;

function resetPassword()
{
	$("#nameUser").css('background-color', "red").html("User ID");
	$("#userNumberTxt").removeAttr("disabled");
	$("#btn_login").removeAttr("disabled");
	$("#btn_reset").removeAttr("disabled");
}

function getPass()
{
	$.getJSON('<?php echo $this->base; ?>/pedido/jsonpass', {pass: $("#userNumberTxt").val()}, function(json)
	{
		auxJson = json;

		user = json;

		$("#userNumberTxt").val("");
		
		if(!auxJson.caf01_cod)
		{
			$("#nameUser").css("background-color", "#FF3300").html("User ID");
			//$("#table").attr("disabled", "disabled").val(0);
			//$("#addIten").attr("disabled", "disabled");
			//$("#group").attr("disabled", "disabled").val(0);
			
			msg({vmsg: "Usuario nao encontrado.",time: 3000 ,type: "alert"});

			$("#userNumberTxt").focus();

			logoff();
			
			return false;
		}

		$("#nameUser").css('background-color', "#009900").html(json.caf01_user);
		//$("#userNumberTxt").attr("disabled", "disabled");
		//$("#btn_login").attr("disabled", "disabled");
		//$("#btn_reset").attr("disabled", "disabled");

		<?php echo $this->jsfunc; ?>;

		return true;
	});
}
</script>

<div style="width: 380px; margin: 0 auto;">
	<div id="nameUser" style="margin-bottom: 3px; margin-left: 3px; background-image: url('<?php echo $this->base; ?>/public/images/bg_menu.png'); background-repeat: repeat-x; font-size: 25px; width: 376px; color: white; background-color: #FF3300; text-align: center; padding: 10px;" class="ui-widget ui-corner-all">
		User ID
	</div>
	<table border="0" id="userNumber" cellpadding="0" cellspacing="0" style="text-align: center; font-size: 40px; z-index: 3; position: relative;">
		<tr>
			<td>
				<div>
					1
				</div>
			</td>
			<td>
				<div>
					2
				</div>
			</td>
			<td>
				<div>
					3
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div>
					4
				</div>
			</td>
			<td>
				<div>
					5
				</div>
			</td>
			<td>
				<div>
					6
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div>
					7
				</div>
			</td>
			<td>
				<div>
					8
				</div>
			</td>
			<td>
				<div>
					9
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div id="btn_reset" onclick="$('#userNumberTxt').val('');" style="padding: 20px 25px 20px 15px;">
					Reset
				</div>
			</td>
			<td>
				<div>
					0
				</div>
			</td>
			<td>
				<div  id="btn_login" onclick="getPass();">
					Ok
				</div>		
			</td>
		</tr>
		<tr>
			<td style="padding: 0px; margin: 0">
			</td>
			<td>
				<input id="userNumberTxt" maxlength="3" type="password" value="" style="text-align: center; width: 125px; font-size: 24px; border: 0;" />
				<script>$("#userNumberTxt").focus()</script>
			</td>
			<td>
			</td>
		</tr>
	</table>
</div>


<script>

$("#userNumber tr td div").addClass("ui-corner-all").click(function(){
	if(!$("#userNumberTxt").attr("disabled"))
	{
		var nTxt = $("#userNumberTxt").val() + parseInt($(this).html());

		$("#userNumberTxt").focus();

		if($("#userNumberTxt").val().length < 3)
		{
			$("#userNumberTxt").val(nTxt);
		}
		
		if($("#userNumberTxt").val().length == 3)
		{
			getPass();
		}
	}
});

$("#userNumberTxt").keyup(function()
{
	if($("#userNumberTxt").val().length == 3)
	{
		getPass();
	}
});

</script>